<template>
<div class="ticket-controller">
	<div style="margin:25px 0px 0px 15px; background-color:#1E90FF;width:1245px;height:60px;text-align:center;font-size:35px;">车票信息</div>
	<div style="margin:20px 0px 0px 15px;"><input type="button" value="添加车票" style="height:40px;width:80px;" @click="addTicket()"></div>
	<table class="ticket-list-table">
		<tr>
			<th>序号</th>
			<th>出发地</th>
			<th>到达地</th>
			<th>出发时间</th>
			<th>车票类型</th>
			<th>车票数</th>
			<th>价格</th>
			<th>操作</th>
		</tr>
		<tr v-for="d in datas">
			<td>{{d.id}}</td>
			<td>{{d.start}}</td>
			<td>{{d.end}}</td>
			<td>{{d.startTime}}</td>
			<td>{{d.ticketType}}</td>
			<td>{{d.ticketSum}}</td>
			<td>{{d.ticketPrice}}</td>
			<td>
				<input type="button" value="修改" @click="updateTicket(d)" style="width:60px; height:30px;">
				<input type="button" value="删除" @click="deleteTicket(d)" style="width:60px; height:30px;">
			</td>
		</tr>
	</table>
	<div class="menu">
		<ul>
			<li><a class="ye" @click="showTicket(0)">首页</a></li>
			<li v-if="sp<=1"><input type="button" value="上一页" style="height:26px;"></li>
			<li v-else><input type="button" value="上一页"  @click="showTicket(1)" style="height:26px;"></li>
			<li>第{{sp}}页</li>
			<li v-if="sp>=tp"><input type="button" value="上一页"style="height:26px;"></li>
			<li v-else><input type="button" value="下一页" @click="showTicket(2)" style="height:26px;"></li>
			<li>共{{tp}}页</li>
			<li><a class="ye" @click="showTicket(3)">尾页</a></li>
		</ul>
	</div>
</div>
</template>
 
<script>
module.exports = {
    data: function() {
        return {
        	sp : 1,
        	tp : 0,//共分了多少页
        	datas : ''
        }
    },
    mounted : function(){
    	if(this.$route.query.sp>0){
    		this.sp = this.$route.query.sp;
    	}
    	this.showTicket();
    },
    methods : {
    	addTicket : function(){
    		this.$router.push({path:'/ticketControllerAdd',query:{sp:this.sp}});
    	},
    	updateTicket : function(ticket){
    		this.$router.push({path:'/ticketControllerUpdate',query:{ticket:ticket,sp:this.sp}});
    	},
		showTicket : function(n){
			///////////////
			//控制页面的跳转
			if(n==0){
				this.sp=1;
			}
			if(n==1){
				this.sp=this.sp-1;
			}
			if(n==2){
				this.sp=this.sp+1;
			}
			if(n==3){
				this.sp=this.tp;
			}
			/////////////////
    		var target = this;
    		axios.get('/bac/ticket/showTicket?sp='+target.sp)
    		.then(function(response){
    			//经验证response返回的数据存储在data里
    			//经过后台返回的数据存储在result列表的data中;
    			target.datas = response.data.result.data;
    			target.tp = response.data.result.tp;
    		})
    		.catch(function(error){
    			console.log(error);
    		});
    	},
    	deleteTicket : function(data){
    		var target = this;
    		axios.post('/bac/ticket/deleteTicket',data)
    		.then(function(response){
    			var sc = response.data.success;
    			if(sc==true){
    				alert("删除成功！");
    				window.location.reload();
    			}
    		})
    		.catch(function(error){
    			console.log(error);
    		});
    	}
    }
}
</script>
 
<style>
	a.ye:hover{
		color:#FF0000;
	}
	.ticket-list-table{
		text-align:center;
		border: double 1px #EAEAEA;
		margin-top:5px;
		margin-left:10px;
	}
	.ticket-list-table tr th{
		border: double 1px;	
		width:150px;
		height:80px;
		background-color:#1E90FF;
	}
	.ticket-list-table tr td{
		border: double 1px;
		width:150px;
		height:50px;
	}
	.menu{
		text-align:center;
		width:1252px;
		height:50px;
		background-color:#1E90FF;
		padding-top:20px;
		margin:10px 0px 0px 10px;
	}
	.menu ul li{
		display:inline;
		margin-left:15px;
	}
</style>